<template>
  <view class="main">
    <header-vue bgColor="transparent" :back="true"></header-vue>
    <view class="margin32">
      <view class="title">选择您的身份</view>
      <view
        v-for="(item, index) in list"
        class="flex between list-item white-box"
        @click="radioIndex = index"
      >
        <image :src="item.icon"></image>
        <view style="flex: 1; height: 100%" class="flex center between">
          <view>{{ item.name }}</view>
          <view
            class="flex between font28"
            style="margin-right: 28rpx"
            :class="{ active: radioIndex == index }"
          >
            <view class="flex radio">
              <i class="iconfont icon-duihao" v-if="radioIndex == index"></i>
            </view>
          </view>
        </view>
      </view>
      <view class="btn flex center" @click="goPage">确认</view>
    </view>
  </view>
</template>

<script>
import headerVue from "../../components/header.vue";

export default {
  data() {
    return {
      radioIndex: 0,
      list: [
        {
          name: "技工类师傅",
          icon: "/static/mine/jslsf.png",
          url: "",
        },
        {
          name: "邻工类师傅",
          icon: "/static/mine/lglsf.png",
          url: "",
        },
      ],
    };
  },
  components: {
    headerVue,
  },
  methods: {
    goPage() {
      //默认跳到登录
      // uni.navigateTo({
      // 	url: `/views-master/login/index`,
      // });
      //暂时跳到首页
      uni.navigateTo({
        url: `/views-master/main/index`,
      });
     
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: linear-gradient(
    180deg,
    #b5cfff 0%,
    rgba(246, 249, 255, 0.2) 30%,
    #f6f9ff 100%
  );
  height: 100vh;
}

.margin32 {
  margin: 0 32rpx;
}

.title {
  font-weight: 500;
  font-size: 44rpx;
  color: #333333;
  margin: 40rpx;
}

.white-box {
  width: 100%;
  height: 200rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 28rpx;
  align-items: flex-end;
  padding: 0 32rpx;
  box-sizing: border-box;
  margin-bottom: 60rpx;

  image {
    width: 136rpx;
    height: 170rpx;
    margin-right: 52rpx;
  }
}

.btn {
  height: 80rpx;
  margin: 160rpx 32rpx 0;
  background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
  border-radius: 60rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #ffffff;
}
.radio {
  width: 26rpx;
  height: 26rpx;
  border-radius: 50%;
  border: 1rpx solid $uni-color-primary;
  margin-right: 8rpx;
}

.active {
  color: $uni-text-color;

  .radio {
    background: $uni-color-primary;
    color: $uni-text-color-inverse;
  }
}
</style>
